

var chart;

var interval;

$(function() {

	$('#first ul li:last-child, #second ul li:last-child').css({'border':'none'});
	
	load();

	var first_list = $('#first ul li');
	var second_list = $('#second ul li');
	
	$('#first ul li').click(function() {
		if ($(this).hasClass('active')) {
			return;
		}
		$('#first ul li.active').removeClass('active');
		$(this).addClass('active');		
		$('#second ul li.active').removeClass('active');
		$(second_list[0]).addClass('active');	
		
		$('#leftview').html('').treeview({url: "tree.php?source="+$(this).text(),
		highlight: function() {
			setHighlight($($('#leftview li').has('ul')[0]));
		},
		leafclick: function() {
			$('.treeview li:not(.collapsable, .expandable)').bind('click', function() {
				setLeaf($(this));
			});
		}
		});
		setSecondColumnOfBc($(this).text());
		setThirdColumnOfBc($(second_list[0]).text());
	});
	
	$('#second ul li').click(function() {
		if ($(this).hasClass('active')) {
			return;
		}
		$('#second ul li.active').removeClass('active');
		$(this).addClass('active');		
		
		setThirdColumnOfBc($(this).text());
		
		load();
		
	});
	
	


	var settings = {

		url: "tree.php?source=Agents",
		highlight: function() {
			setHighlight($($('#leftview li').has('ul')[0]));
		},
		leafclick: function() {
			$('.treeview li:not(.collapsable, .expandable)').bind('click', function() {
				setLeaf($(this));
			});
		}
	};
	$('#leftview').treeview(settings);
	//hightlight();
	
	for (var i=1; i<6; i++) {
		$.mockjax({ url: 'mockjax'+i, responseTime: 1000*i });
	}
		
		function setBreadcrumbs(i, v) {
			$($('.breadcrumbs li a')[i]).text(v);
		}
		
		function setSecondColumnOfBc(v) {
			setBreadcrumbs(1, v);			
		}
		
		function setThirdColumnOfBc(v) {
			setBreadcrumbs(2, v);			
		}
		
		function setFourthColumnOfBc(v) {
			setBreadcrumbs(3, v);			
		}
		
		function highlight() {
			setHighlight($($('#leftview li').has('ul')[0]));
		}
		
		function setHighlight(obj) {
			if  (!(obj.hasClass('expandable') || obj.hasClass('collapsable'))) {
				obj.addClass('active');
				var t = obj.children('span').text();
				setFourthColumnOfBc(t.substring(t.indexOf(' ')));
			}
			if (obj.children('ul').length > 0) {
				setHighlight($(obj.children('ul').children('li')[0]));
			}
		}
		
		function setLeaf($this) {
			if ($this.hasClass('active')) {
				return;
			}
			$('.treeview li.active').removeClass('active');
			$this.addClass('active');
			var t = $this.children('span').text();
			setFourthColumnOfBc(t.substring(t.indexOf(' ')));
			
			load();
		}
		
		function load() {
			var $url;
			if ($('#second ul li.active').text().indexOf('Performance') > -1) {
				$url = "perf.php";
			} else if ($('#second ul li.active').text().indexOf('Activity') > -1) {
				$url = "activity.php";
			}
			
			var $data;
			$.ajax({
				url: $url,
				success: function(data) {
					$data = data;
					transition(function() {
						$('#content .right').html($data);
						if ($url == "perf.php") {
							if (interval) {
								clearInterval(interval);
							}
						} else if ($url == "activity.php") {
							interval = setInterval(function() {
								var $time = $('#logview input:hidden').val();
								$('#logview .spinner').addClass("loading");
								var ajaxArray = [];
								var $stillLoading = true;
								ajaxArray.push($.ajax({
									url: 'ajaxLog.php',
									data: {t: $time},
									success: function(data) {
										if (data) {
											$('#logview input:hidden').remove();
											$('#logview .spinner').after(data);
											$stillLoading = false;
										}
									}}));
								
								/*
								ajaxArray.push($.ajax({
									type: "POST",
									url: "mockjax4",
									error: function() {
										console.log('error');
									}
								}));
								*/
								
								$.when.apply(null, ajaxArray).done(function() {
									if (!$stillLoading) {
										$('#logview .spinner').removeClass("loading");
									}									
								});
								
							}, 5000);
						}
					});
				}
			});
			
			
		}
		
		function transition(callback) {		
			var ajaxArray = [];
			$('#content .right .box').each(function() {
				//$(this).append('<div class="modal"></div>');
				//$(this).children('.modal').offset($(this).offset());
				//$(this).children('.modal').height($(this).outerHeight());
				//$(this).children('.modal').width($(this).outerWidth());
				
				var $box = $(this);
				if ($box.attr('id') == 'desc') {
					return;
				}
				var $url = "mockjax" + Math.floor((Math.random()*3)+1)
					
				ajaxArray.push($.ajax({
					type: "POST",
					url: $url,
					error: function() {
						console.log('error');
					},
					complete: function() {
						$box.removeClass("loading");
					},
					beforeSend: function() {
						$box.addClass("loading");
				    }
				}));
			});
			
			$.when.apply(null, ajaxArray).done(function() {
				callback();
			});
			
		}
		
});

